<template>
    <el-table :data="list" stripe style="width: 100%">
        <el-table-column prop="name" label="用户" width="120px">
        </el-table-column>
        <el-table-column label="权限" prop="power">
            <template #default="scope">
                <el-tag class="ml-2" type="danger" v-show="scope.row.power.includes('所有权限')">
                    所有权限
                </el-tag>
                <el-tag class="ml-2" type="success" v-show="scope.row.power.includes('用户权限管理')">
                    用户权限管理
                </el-tag>
                <el-tag class="ml-2" type="warning" v-show="scope.row.power.includes('住户信息修改')">
                    住户信息修改
                </el-tag>
                <el-tag class="ml-2" type="warning" v-show="scope.row.power.includes('成员变更')">
                    成员变更权限
                </el-tag>
                <el-tag class="ml-2" type="info" v-show="scope.row.power.length == 0">
                    暂无权限
                </el-tag>
            </template>

        </el-table-column>
        <el-table-column label="操作">
            <template #default="scope">
                <el-button size="small" @click="handleEdit(scope.row)">编辑</el-button>
                <el-button size="small" type="danger" @click="deleteEdit(scope.row)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
    <!-- 弹窗 -->
    <PermissDialog @GetPerList="getTableList"></PermissDialog>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import link from "../../api/apis";
// 引入饿了么ui的弹出框
import { ElMessage, ElMessageBox } from 'element-plus'
// 引用useStore
import { useStore } from "vuex";
// 引入弹窗组件
import PermissDialog from "../../components/PermissDialog.vue";
// 得到store对象
const store = useStore();
const list = ref([])
const getTableList = () => {
    link('/register').then((res) => {
        // console.log('res', res);
        list.value = res.data
    })
}
onMounted(() => {
    getTableList()
})

// console.log(111,JSON.parse(store.state.homeview.token).power);
// console.log(333,JSON.parse(store.state.homeview.token).power.includes('用户权限管理'));
// 将缓存的权限赋值给power变量
const power=JSON.parse(store.state.homeview.token).power

//编辑信息
const handleEdit = (row: any) => {
    if (power.includes('用户权限管理') || power.includes('所有权限')) {
        // console.log('用户',row)
        // 点击更改弹出框状态
        store.commit('SET_USERDIALOG')
        // 传递给编辑框信息
        store.commit('showUser', row)
    } else {
        ElMessage({
            type: 'error',
            message: '您没有用户权限管理权限！！！',
        })
        return
    }

}
// 删除成员
const deleteEdit = (row: any) => {
    if (power.includes('用户权限管理') || power.includes('所有权限')||power.includes('成员变更')) {
        console.log('正在删除');
        ElMessageBox.confirm(
            '确认删除该信息吗?',
            '您正在进行删除操作',
            {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            }
        )
            .then(() => {
                // console.log('id',row.id);
                link(`/register/${row.id}`, 'delete').then(res => {
                    if (res.status === 200) {
                        ElMessage({
                            type: 'success',
                            message: '删除成功！',
                        })
                        getTableList()
                    } else {
                        ElMessage({
                            type: 'error',
                            message: '删除失败！',
                        })
                    }
                })
            })
            .catch(() => {
                ElMessage({
                    type: 'info',
                    message: '已取消！',
                })
            })
    }else {
        ElMessage({
            type: 'error',
            message: '您没有成员变更权限！！！',
        })
        return
    }

}

</script>

<style scoped></style>